<template>
	<view>
		<view class="header-bar">
			<uni-nav-bar left-icon="left" title="我的班级" backgroundColor="#3a408c" shadow color="#fff"
				@clickLeft="goReturn" />
		</view>

		<!-- 班级列表为空时 -->
		<view v-if="classItems.length === 0 " class="classNone">
			<image src="../../static/空白页面插图.png" mode=""></image>
			<view class="goIn">暂无班级</view>
		</view>
		<!-- 班级列表 -->
		<view v-else class="cardList">
			<view class="card" v-for="item in classItems" :key="item.id" :name="item.className" :id="item.id"
				@click="goClassDtail">
				<uni-card :title="item.className" extra="48人">
					<text class="uni-body">
						<view class="">
							主讲：{{name}} 老师
						</view>
						<view class="">
							科目：{{item.courseName}}
						</view>
					</text>
				</uni-card>
			</view>
		</view>


		<uni-popup ref="popup" :mask-click="false">
			<view class="ibox">

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import server from "@/util/http.js"
	export default {
		data() {
			return {
				classItems: [],
				userNum: '',
				userName: '',
				id: '',
				name: ''

			}
		},
		methods: {
			//班级详情
			goClassDtail(e) {
				uni.navigateTo({
					url: `../classDetail/classDetail?id=${e.currentTarget.id}`
				})
			},
			goReturn() {
				uni.navigateBack({
					delta: 1
				})
			},
			//点击导入 打开弹出框
			open() {
				this.$refs.popup.open('center')
			},
			//点击关闭 关闭弹出框
			close() {
				this.$refs.popup.close()
			},
			request() {
				uni.getStorage({
					key: 'teacher',
					success: res => {
						this.id = res.data.id
						this.name = res.data.name
					}
				})
				server({
					url: 'http://101.43.227.220:3003/teacher/onlineClass/query?teacherId=' + Number(this.id),
					method: 'post',
					success: res => {
						this.classItems = res.data;
					},
					fail: e => {
						console.log(e);
					}
				})
			}
		},
		//页面显示 时调用接口 显示班级信息 班级名 课程 学生人数 
		onShow() {

		},
		onLoad(option) {
			this.request();
		}
	}
</script>

<style scoped>
	>>>.uni-body span {
		display: flex;
		justify-content: space-between;
	}

	.classNone {
		text-align: center;
		margin-top: 300rpx;
	}

	.classNone image {
		width: 200rpx;
		height: 200rpx;
	}

	.goIn {
		margin-top: 20rpx;
		font-size: 34rpx;
		font-weight: 500;
		font-family: 'Courier New', Courier, monospace;
	}

	>>>.uni-nav-bar-text {
		font-size: 32rpx;
		font-weight: 600;
	}

	.ibox {
		background-color: white;
		font-size: 40rpx;
		border-radius: 6px;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

	}

	.container {
		margin-top: 20px;
	}

	.text {
		text-align: center;
	}

	.container input {
		font-size: 37rpx;
		border: 1px solid lightgray;
		padding: 14rpx 2px 14rpx 4px;
		border-radius: 5px;
		margin-top: 10rpx;
		width: 94%;
		display: block;
		margin: 20rpx auto auto auto;
	}

	.btn {
		display: flex;
		width: 98%;
		margin: auto;
		margin-top: 20px;
	}

	.btn button {
		width: 48%;
	}

	>>>.uni-popup .uni-popup__wrapper {
		width: 94%;
	}
</style>
